<!-- 热门城市  1-->
<template>
	<div>
		<div class="hcity">
			<div class="hcity-title">
				热门城市
			</div>
			<ul class="hcity-list">
				<li v-for="(item , index) in hotCities" :key='index' @click="changeCityName(item.name)">
					{{item.name}}
				</li>
			</ul>
		</div>
		<!-- 字母排列 2-->
		<div class="sort">
			<div class="sort-title">
				字母排序
			</div>
			<ul class="sort-list">
				<li v-for="(item,index) in citys" :key='index'>
					{{item.initial}}
				</li>
			</ul>
		</div>

		<!-- list城市字母列表 3-->
		<div class="city">
			<div v-for="(list,index) in citys" :key='index'>
				<div class="city-title">
					{{list.initial}}
				</div>
				<ul class="city-list">
					<li v-for="(item,index) in list.list">
						{{item.name}}
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	// 引入vuex里面的mutations的状态
	import {mapMutations } from 'vuex'
	export default {
		props:['hotCities','citys'],
		methods:{
			changeCityName(cityName){
				this.changeCity(cityName)
				this.$router.push('/')
			},
			...mapMutations(['changeCity'])
		}
	}
</script>

<style scoped>
	/* <!-- /* <!-- 热门城市 1--> */
	.hcity {
		width: 100%;
		font-size: 0.28rem;
	}

	.hcity-title {
		padding: 0.2rem 0.3rem;
	}

	.hcity-list {
		background-color: white;
		overflow: hidden;
		position: relative;
	}

	/* 在li标签之前，创建一个虚拟标签，覆盖ul上方：避免标签之间的内容冲突 */
	.hcity-list:before {
		content: "";
		position: absolute;
		width: 33.333%;
		height: 100%;
		left: 33.333%;
		border-left: 1px solid #ddd;
		border-right: 1px solid #ddd;
	}

	.hcity-list li {
		width: 33.333%;
		height: 0.9rem;
		text-align: center;
		line-height: 0.9rem;
		float: left;
		border-bottom: 1px solid #ddd;
		position: relative;
	}



	/* 字母排列  2*/
	.city {
		width: 100%;
		font-size: 0.28rem;
	}

	.city-title {
		padding: 0.2rem 0.3rem;
	}

	.city-list {
		background-color: white;
		overflow: hidden;
		position: relative;
	}

	/* 在li标签之前，创建一个虚拟标签，覆盖ul上方：避免标签之间的内容冲突 */
	.city-list:before {
		content: "";
		position: absolute;
		width: 25%;
		height: 100%;
		left: 25%;
		border-left: 1px solid #ddd;
		border-right: 1px solid #ddd;
	}

	.city-list:after {
		content: "";
		position: absolute;
		width: 25%;
		height: 100%;
		right: 25%;
		border-right: 1px solid #ddd;
	}

	/* 在最后一个li之后，创建一个虚拟标签，覆盖在每一行倒数第二个li上方 */
	.city-list li {
		width: 25%;
		height: 0.9rem;
		text-align: center;
		line-height: 0.9rem;
		float: left;
		border-bottom: 1px solid #ddd;
	}



	/* <!-- list城市字母列表 3-->*/
	.sort {
		width: 100%;
		font-size: 0.28rem;
	}

	.sort-title {
		padding: 0.2rem 0.3rem;
	}

	.sort-list {
		background-color: white;
		overflow: hidden;
	}

	.sort-list li {
		width: 33.333%;
		height: 0.9rem;
		text-align: center;
		line-height: 0.9rem;
		float: left;

	}
</style>
